<template>
  <div :id="idName" class="donut-content"></div>
</template>

<script>
export default {
  name: "DonutChart",
  props: {
    idName: {
      type: String,
      default: "",
    },
    xData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legendColor: {
      type: Array,
      default: () => {
        return [];
      },
    },
    graphicData: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    graphicData() {
      this.initEcharts();
    },
  },
  data() {
    return {
      myChart: {},
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        tooltip: {
          trigger: "item",
          transitionDuration: 0, // 解决鼠标移入出现抖动且滚动条迅速出现消失问题
        },
        legend: {
          orient: "vertical",
          right: "10%",
          top: "center",
          align: "left",
          icon: "circle",
          itemGap: 20,
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
            // 调整图例文字对齐
            padding: [0, -10, -3, -4],
          },
          // 自定义图例
          // 图例后添加数值
          formatter: function (name) {
            let tarValue;
            const dataLegend = option.series[1].data;
            for (let i = 0; i < dataLegend.length; i++) {
              if (dataLegend[i].name === name) {
                tarValue = dataLegend[i].value;
              }
            }
            return name + "   " + tarValue;
          },
        },
        graphic: [
          //为环形图中间添加文字
          {
            type: "text",
            left: "center",
            top: "42%",
            style: {
              text: this.graphicData,
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 18,
            },
          },
          {
            type: "text",
            left: "center",
            top: "55%",
            style: {
              text: "总数",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 14,
            },
          },
        ],
        color: this.legendColor,
        series: [
          // 外环灰色背景
          {
            name: "",
            type: "pie",
            silent: true,
            label: {
              normal: {
                show: false,
              },
            },
            radius: ["30%", "80%"], // 半径
            color: "#131971",
            data: [{ value: 100, name: "" }],
          },
          // 数据环
          {
            name: "",
            type: "pie",
            radius: ["38%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.xData,
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById(this.idName));
      this.myChart.setOption(option, true);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.donut-content {
  width: 100%;
  height: 200px;
}
</style>
